<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/reset.css" rel="stylesheet" />
<style type="text/css">
/*member*/
.b { font-weight: 700; }
.bd_1 { border: 1px solid #ABB8CE; }
.f14 { font-size: 14px; }
.tc { text-align: center; }
.tl { text-align: left; }
.table_list { }
.w30 { width: 30px; }
.w50 { width: 50px; }
.w100 { width: 100px; }
.table_list .menu, .menu .page_number { padding: 6px 8px 4px 8px; }
.table_list .menu {
    background: #E3E5E6;
    position: relative;
}
.menu .page_number {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 5px;
+margin-right:20px;
}
.menu .m_r10 { _margin-left: -4px; }
.table {
    cellpadding: 0;
    cellspacing: 0;
    width: 100%;
    line-height: 2.5em;
    font-size: 12px;
    text-align: left;
}
.table thead { border-bottom: 1px solid #FFF; }
.table thead, .table tr:hover, .js_hover { background: #D0DBEE; }
.table thead th { font-weight: 700; }
.table .even { background: #EEF4F7; }
</style>
</head>

<body>
<div id="doc" class="y-t3">
    <div id="bd">
        <div class="y-main">
            <div class="y-g main">
                <div>
                    <h2>算法正确性测试</h2>
                    <div>给出一个正确的测试数组</div>
                    <textarea style="width:600px;" id="testArray">[4,2,5,6,8,9,7,0,1,3]</textarea>
                    <div id="testResults"> </div>
                    <div>
                        <button type="button" onclick="jelle.correctness('quickSort')" >快速排序</button>
                        <button type="button" onclick="jelle.correctness('insertSort')" >插入排序</button>
                        <button type="button" onclick="jelle.correctness('shellSort')" >希尔排序</button>
                        <button type="button" onclick="jelle.correctness('systemSort')" >系统方法</button>
                        <button type="button" onclick="jelle.correctness('bubbleSort')" >冒泡排序</button>
                        <button type="button" onclick="jelle.$('testResults').innerHTML = ''" >清空</button>
                    </div>
                </div>
                <br/>
                <br/>
                <div>
                    <h2>速度测试</h2>
                    <div> 测试数组长度：
                        <input type="text" value="1000" id="arrayLength" />
                        <br/>
                        测试次数：10次<br/>
                    <span style="color:#f30;">数组太长请慎用 冒泡排序 </span> </div>
                    <table cellpadding="0" cellspacing="0" class="table bd_1">
                        <colgroup>
                        <col style="width:100px;">
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        </colgroup>
                        <thead class="b f14">
                            <tr>
                                <th class="tc">算法</th>
                                <th>数组长度</th>
                                <th class="tl">分别用时(毫秒)</th>
                                <th>平均(毫秒)</th>
                                <th>点击测试</th>
                            </tr>
                        </thead>
                        <tbody id="memberListIn">
                            <tr id="970000000000001">
                                <td  class="tc">快速排序</td>
                                <td><span id="length_1"></span></td>
                                <td><span id="times_1"></span></td>
                                <td><span id="time_1"></span></td>
                                <td><button type="button" onclick="jelle.test('quickSort', 1)">测试</button></td>
                            </tr>
                            <tr id="970000000000001">
                                <td  class="tc">插入排序</td>
                                <td><span id="length_2"></span></td>
                                <td><span id="times_2"></span></td>
                                <td><span id="time_2"></span></td>
                                <td><button type="button" onclick="jelle.test('insertSort', 2)" >测试</button></td>
                            </tr>
                            <tr id="970000000000001">
                                <td  class="tc">希尔排序</td>
                                <td><span id="length_3"></span></td>
                                <td><span id="times_3"></span></td>
                                <td><span id="time_3"></span></td>
                                <td><button type="button" onclick="jelle.test('shellSort', 3)" >测试</button></td>
                            </tr>
                            <tr id="970000000000001">
                                <td  class="tc">系统方法</td>
                                <td><span id="length_4"></span></td>
                                <td><span id="times_4"></span></td>
                                <td><span id="time_4"></span></td>
                                <td><button type="button" onclick="jelle.test('systemSort', 4)" >测试</button></td>
                            </tr>
                            <tr id="970000000000001">
                                <td  class="tc">冒泡排序</td>
                                <td><span id="length_5"></span></td>
                                <td><span id="times_5"></span></td>
                                <td><span id="time_5"></span></td>
                                <td><button type="button" onclick="jelle.test('bubbleSort', 5)" title="数组太长可能就卡死">小心测试</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="y-b"> </div>
    </div>
</div>
<script type="text/javascript">
Jun = {};
Jun.array = {
	 
	
	df:function(len){
		var array = [], i;
		len = len || 1000;
		for(i = 0; i< len; i++){
			array.push(i);
		}
		return array.sort(function(){ return Math.random() > 0.5});
	},
	// Jun.array.test();
	test:function(method, arrayLength, callBack){
		
		var times = [];
		var i = 0;
		var sum = 0;
		var len = 10;
		
		for(;i<len;i++){
			test();
		}
		
		for(i=0;i<times.length;i++){
			sum+=times[i];
		}
		
		

		function test(){
			var array = Jun.array.df(arrayLength);
			var st = new Date().getTime();
			Jun.array[method](array); //shellSort  quickSort  systemSort
			var d = new Date().getTime() - st;
			callBack && callBack(new Date().getTime() - st);
			times.push(d);
		}
		
		return sum / len;
	},
	
	// ---------- 一些排序算法
	// js 利用sort进行排序
 	systemSort:function(array){
		return array.sort(function(a, b){
			return a - b;
		});
	},
	// 冒泡排序
	bubbleSort:function(array){
		var i = 0, len = array.length,
			j, d;
		for(; i<len; i++){
			for(j=0; j<len; j++){
				if(array[i] < array[j]){
					d = array[j];
					array[j] = array[i];
					array[i] = d;
				}
			}
		}
		return array;
	},
	// 快速排序
	quickSort:function(array){
		//var array = [8,4,6,2,7,9,3,5,74,5];
		//var array = [0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];
		var i = 0;
		var j = array.length - 1;
		var Sort = function(i, j){
			
			// 结束条件
			if(i == j ){ return };
			
			var key = array[i];
			var stepi = i; // 记录开始位置
			var stepj = j; // 记录结束位置
			
			while(j > i){
				// j <<-------------- 向前查找
				if(array[j] >= key){
					j--;
				}else{
					array[i] = array[j]
					//i++ ------------>>向后查找
					while(j > ++i){
						if(array[i] > key){
							array[j] = array[i];
							break;
						}
					}
				}
			}
			
			// 如果第一个取出的 key 是最小的数
			if(stepi == i){
				Sort(++i, stepj);
				return ;
			}
			
			// 最后一个空位留给 key
			array[i] = key;
			
			// 递归
			Sort(stepi, i);
			Sort(j, stepj);
		}
		
		Sort(i, j);
		
		return array;
	},
	
	// 插入排序
	insertSort:function(array){
		
		// http://baike.baidu.com/image/d57e99942da24e5dd21b7080
		// http://baike.baidu.com/view/396887.htm
		//var array = [0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];
		
		var i = 1, j, step, key,
			len = array.length;
		
		for(; i < len; i++){
			
			step = j = i;
			key = array[j];
			
			while(--j > -1){
				if(array[j] > key){
					array[j+1] = array[j];
				}else{
					break;
				}
			}
			
			array[j+1] = key;
		}
		
		return array;
	},
	
	// 希尔排序
	//Jun.array.shellSort(Jun.array.df(10000));
	shellSort:function(array){

		// http://zh.wikipedia.org/zh/%E5%B8%8C%E5%B0%94%E6%8E%92%E5%BA%8F
		// var array = [13,14,94,33,82,25,59,94,65,23,45,27,73,25,39,10];
		
		var stepArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1]; // reverse() 在维基上看到这个最优的步长 较小数组
		//var stepArr = [1031612713, 217378076, 45806244, 9651787, 2034035, 428481, 90358, 19001, 4025, 836, 182, 34, 9, 1]//针对大数组的步长选择
		var i = 0;
		var stepArrLength = stepArr.length;
		var len = array.length;
		var len2 =  parseInt(len/2);
		
		for(;i < stepArrLength; i++){
			if(stepArr[i] > len2){
				continue;
			}
			
			stepSort(stepArr[i]);
		}

		// 排序一个步长
		function stepSort(step){
			
			//console.log(step) 使用的步长统计
			
			var i = 0, j = 0, f, tem, key;
			var stepLen = len%step > 0 ?  parseInt(len/step) + 1 : len/step; 
			
			
			for(;i < step; i++){// 依次循环列

				for(j=1;/*j < stepLen && */step * j + i < len; j++){//依次循环每列的每行
					tem = f = step * j + i;
					key = array[f];

					while((tem-=step) >= 0){// 依次向上查找
						if(array[tem] > key){
							array[tem+step] = array[tem];
						}else{
							break;
						}
					}
					
					array[tem + step ] = key;
					
				}
			}
			
		}
		
		return array;
		
	}
 };
</script> 
<script type="text/javascript">
	var jelle = {
		index:1,
		$:function(id){
			return document.getElementById(id);
		},
		test:function(method, num){
			var arrayLength = parseInt(jelle.$('arrayLength').value);
			jelle.index = num;
			jelle.$('length_'+num).innerHTML = arrayLength;
			jelle.$('times_'+num).innerHTML = '';
			jelle.$('time_'+num).innerHTML = Jun.array.test(method, arrayLength, jelle.insert);;
		},
		insert:function(num){
			jelle.$('times_'+jelle.index).innerHTML += num+', ';
		},
		correctness:function(method){
			var array = new Function('return '+ jelle.$('testArray').value)();
			jelle.$('testResults').innerHTML += '<div>['+method+']: '+Jun.array[method](array)+'</div>';
		}
	}
</script>
</body>
</html>
